React Router vs 傳統的多頁應用

React Router 是一個用來處理單頁應用程式（Single Page Application, SPA）中的路由管理的工具。通過它，我們可以輕鬆地在不同的頁面之間切換，並保持 SPA 的無刷新體驗。

如果你只是簡單地使用 <a> 標籤或 window.location.href 來改變 URL，這是傳統的多頁應用方式，會導致整個頁面的刷新。

若不使用Router來實現 SPA（單頁應用）會變得麻煩：你需要手動管理瀏覽器的 URL、歷史紀錄、以及不同頁面之間的狀態同步。

React Router 的 <Link> 組件實際上是利用了瀏覽器的 history.pushState 來實現無刷新頁面導航。當你點擊 <Link> 時，React Router 只會更新瀏覽器的地址欄，而不會發送新的 HTTP 請求，這樣就保持了頁面的狀態，達到了 SPA 的效果。

• history.pushState 是 HTML5 提供的一個 API，用來手動改變瀏覽器的 URL，而不會重新加載整個頁面。
• 所以<Link> 實際上就是對 history.pushState 的封裝，並告訴 React Router 根據新路徑渲染對應的頁面組件。

如果你不用 React Router 的 <Link>，而使用 <a> 或手動修改 window.location，就像傳統的多頁應用那樣，這樣會導致：

• 頁面刷新：每次跳轉都會刷新整個頁面，重新發送 HTTP 請求，破壞 SPA 應有的無刷新體驗。
• 失去應用狀態：每次刷新頁面後，React 應用中的狀態（例如 useState、useEffect 中的值）都會被重置，這與 SPA 的狀態保持特性相悖。

Router基礎介紹與應用

React Router 主要提供三個核心組件來管理路由：

• BrowserRouter: 主要的路由容器，它使用 HTML5 的 history API 來管理你的應用程式的路由，應用中的所有路由都應包含在 BrowserRouter 中。
• Routes: 定義應用程式中的所有路徑。Routes 裡包含多個 Route 元素，每個 Route 對應一個路徑。
• Route: 定義具體的路徑與要渲染的元件。

首先，我們需要在 React 應用中安裝 React Router。
npm install react-router-dom

然後配置三個檔案來測測

src
 |
 |--SubHome.jsx
 |--App1.jsx
 |--App2.jsx
 |--index.js

額不知道為啥我這取Home會有名子衝突，如果你的不會取Home也行。

前面三個測試檔就簡單寫

// SubHome.jsx
import React from 'react';

function SubHome() {
  return (
    <div>
      <h2>這是首頁</h2>
    </div>
  );
}
export default SubHome;

接下來是比較重要的index.js

import React from 'react';
import ReactDOM from 'react-dom/client';  // 改成從 'react-dom/client' 匯入
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import SubHome from './SubHome';
import App1 from './App1';
import App2 from './App2';

function App() {
  return (
    <Router>
      <div>
        {/* 定義導航欄 */}
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/app1">App1</Link>
            </li>
            <li>
              <Link to="/app2">App2</Link>
            </li>
          </ul>
        </nav>

        {/* 定義路由 */}
        <Routes>
          <Route path="/" element={<SubHome />} />
          <Route path="/app1" element={<App1 />} />
          <Route path="/app2" element={<App2 />} />
        </Routes>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

這樣，透過 <Link> 改變 URL 並通知 React Router 根據新路徑渲染對應的頁面，就可以實現單頁應用（SPA）無刷新頁面切換的效果。

Routes?Route?

• Routes：是 React Router 6 引入的一個新組件，它的作用是包裹所有的路由設定，並根據當前的 URL 渲染對應的 Route。
• Route：用來定義具體的路徑和要渲染的組件。每個 Route 都有一個 path 屬性（對應 URL），和一個 element 屬性（要渲染的 React 組件）。

ReactDOM.createRoot 與 StrictMode

• ReactDOM.createRoot：這是 React 18 引入的 API，用來創建應用的根節點。
• React.StrictMode：這是一個用於開發環境的工具，會幫助你檢測 React 應用中的潛在問題，例如使用了過時的 API 或有潛在的副作用。

今天就到這囉，謝謝